<template>
  <vxe-pulldown :ref="pulldownOptions.ref" :transfer="true" class="my-pulldown">
    <template v-slot>
      <el-select
        v-model="show"
        :multiple="pulldownOptions.multiple"
        :multiple-limit="pulldownOptions.multipleLimit"
        :disabled="pulldownOptions.disabled"
        :collapse-tags="pulldownOptions.collapseTags"
        :placeholder="pulldownOptions.placeholder"
        :size="pulldownOptions.size"
        :clearable="pulldownOptions.clearable"
        :filterable="pulldownOptions.filterable"
        :remote="pulldownOptions.remote"
        :reserve-keyword="pulldownOptions.reserveKeyword"
        @input="keyupEvent"
        @focus="focusEvent"
        @visible-change="changeEvent"
        :remote-method="remoteMethod"
        popper-class="popperClass"
      >
        <span slot="empty" style="height: 0px"></span>
      </el-select>
    </template>
    <template v-slot:dropdown>
      <div
        :class="['my-dropdown', pulldownOptions.class]"
        :style="pulldownOptions.style"
      >
        <vTreeEdit
          ref="tree"
          :options="treeOptions"
          :treeData="treeData"
          @event="handleTreeEvent"
        ></vTreeEdit>
      </div>
    </template>
  </vxe-pulldown>
</template>

<script>
export default {
  name: "vSelectTree",
  components: {},
  props: {
    model: {
      //操作按钮组
      type: Object,
      default() {
        return {};
      },
    },
    options: {
      //树配置
      type: Object,
      default() {
        return {};
      },
    },
    treeOptions: {
      //树配置
      type: Object,
      default() {
        return {
          props: {
            children: "childrens",
          },
        };
      },
    },
    treeData: {
      //树数据
      type: Array,
      default() {
        return [];
      },
    },
    value:{}
  },
  data() {
    return {
      show: [],
      pulldownOptions: {},
      defaultOptions: {
        ref: "xDown",
        field: "value", //选择的值写入model的字段
        value: "id", //传空时整个选项的值
        label: "label", //value显示的字段
        multiple: true, //是否多选
        multipleLimit: 0, //多选时用户最多可以选择的项目数，为 0 则不限制
        disabled: false, //是否禁用
        collapseTags: true, //多选时是否将选中值按文字的形式展示
        placeholder: "请选择",
        size: 'mini',//"small",
        clearable: false, //可启用清空功能，属性仅适用于单选。
        filterable: false, //可启用搜索功能
        remote: false, //是否为远程搜索
        reserveKeyword: false, //多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
        valueType: "Array", //值的类型，需要数组或者String
      },
    };
  },
  watch: {
    options: {
      handler() {
        this.initOptions(this.options);
      },
      deep: true,
      immediate: true,
    },
    model: {
      handler(newVal, old) {
        // console.log("newVal,old", newVal, old);
        let _this = this;
        if (_this.model[_this.pulldownOptions.field]) this.initShow();
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    children() {
      let _this = this;
      if (_this.treeOptions.props && _this.treeOptions.props.children)
        return _this.treeOptions.props.children;
      return "children";
    },
  },
  created() {
    let _this = this;
    _this.initOptions(_this.options);
  },
  mounted() {},
  methods: {
    initOptions(options) {
      let _this = this;
      this.pulldownOptions = $.extend({}, this.defaultOptions, options);
      if (this.pulldownOptions.multiple !== true) {
        this.treeOptions.showCheckbox = false;
      }
    },
    initShow() {
      //初始化显示
      let _this = this;
      _this.show = [];
      let value = _this.model[_this.pulldownOptions.field]||this.value;
      if (value) {
        let fields = [];
        let array = _this.treeData;
        if (_this.$XEUtils.isArray(value)) {
          fields = value;
        } else if (
          typeof value === "string"
        ) {
          let obj = {};
          obj[_this.pulldownOptions.value] =
            value;
          fields.push(obj);
        }
        for (let item of fields) {
          this.$XEUtils.searchTree(
            array,
            (element) => {
              if (_this.pulldownOptions.value) {
                if (
                  item[_this.pulldownOptions.value] ===
                  element[_this.pulldownOptions.value]
                ) {
                  _this.show.push(element[_this.pulldownOptions.label]);
                  return true;
                } else {
                  return false;
                }
              } else {
                if (_this.$XEUtils.isEqual(item, element)) {
                  _this.show.push(element[_this.pulldownOptions.label]);
                } else return false; //比较两个对象是否一致
              }
            },
            {
              children: _this.children,
            }
          );
        }
      }
      // console.log("_this.show", _this.show,_this);
    },
    changeEvent(val) {
      let _this = this;
      if (val) _this.$refs[_this.pulldownOptions.ref].showPanel();
      else _this.$refs[_this.pulldownOptions.ref].hidePanel();
    },
    remoteMethod(query) {
      // console.log("query", query);
      if (
        this.pulldownOptions.remoteMethod &&
        typeof this.pulldownOptions.remoteMethod === "function"
      ) {
        return this.pulldownOptions.remoteMethod(query);
      }
    },
    focusEvent() {
      let _this = this;
      // _this.$refs[_this.pulldownOptions.ref].showPanel();
    },

    keyupEvent(event) {
      // console.log('event',event)
    }
    ,
    handleTreeEvent(event) {
      let _this = this;
      let data = [];
      let show = [];
      if (event.type === "nodeClick") {
        if (_this.pulldownOptions.multiple !== true) {
          if (event.data) {
            data.push(event.data);
            _this.$refs[_this.pulldownOptions.ref].hidePanel();
          }
        }
      } else if (event.type === "checkClick") {
        data = event.ref.getCheckedNodes();
      }
      _this.$emit("event", event, data);
      // console.log("event", event, data, _this.pulldownOption);

      if (data.length) {
        let show = data.map((item) => {
          return item[_this.pulldownOptions.label];
        });
        if (_this.pulldownOptions.multiple !== true) {
          [show] = show;
        }
        _this.show = show; //显示的值
        if (_this.pulldownOptions.field) {
          //需要赋值的字段
          if (_this.pulldownOptions.value) {
            //   判断是value是选中的数据还是数据中的某字段
            _this.model[_this.pulldownOptions.field] = data.map((item) => {
              return item[_this.pulldownOptions.value];
            });
            if (_this.pulldownOptions.valueType === "String") {
              [_this.model[_this.pulldownOptions.field]] = _this.model[
                _this.pulldownOptions.field
              ];
            }
          } else _this.model[_this.pulldownOptions.field] = data;
           this.$emit('input', _this.model[_this.pulldownOptions.field]);
        }
      }else{
         _this.show = []; //显示的值
           this.$emit('input',null);

      }
    },
  },
};
</script>
<style  scoped>
.my-dropdown {
  max-height: 30vh;
  min-width: 200px;
  min-height: 100px;
  overflow: auto;
  background-color: #fff;
  padding: 0 0 10px 0;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}
.tree,
.my-pulldown {
  width: 100%;
}
.my-pulldown .el-select{
  width: 100%;
}
.my-pulldown .popperClass {
  display: none;
}
</style>
<style>

</style>
